<template>
	<view
		class="xt-radio-main"
		:style="{
			flexDirection: placement,
			gap: gap
		}"
	>
		<slot></slot>
	</view>
</template>
<script>
import props from './props.js';
/**
 * Radio 单选框
 * @description 本组件提供一个单选框的功能，让开发者开发起来更加得心应手。减少重复的模板代码
 * @tutorial https://ext.dcloud.net.cn/plugin?name=xt-radio
 *
 * @property {String | Number | Boolean}     	value  	           		绑定的值
 * @property {String}          				 	placement             	布局方式,可选 column (默认：row)
 * @property {Boolean}							disabled				是否禁用所有radio(默认 false)
 * @property {Boolean}							round					是否圆形框(默认 false)
 * @property {String}							activeColor				选中时的颜色，应用到所有子Radio组件(默认 '#2979ff')
 * @property {String}							inactiveColor			未选中的颜色 (默认 '#fff' )
 * @property {String}							gap						元素之间的间距(默认 '20rpx')
 * @property {String | Number}					size					组件整体的大小(默认 36rpx)
 * @property {String}							labelColor				label的颜色(默认 '#000')
 * @property {String}							labelAlign				文字布局方向(默认 'right')
 * @property {Boolean}							endAlignment			是否两端对齐(默认 false)
 * @property {String}							iconColor				图标颜色 (默认 '#ffffff')
 * @property {Boolean}							borderBottom			placement为row时，是否显示下边框(默认 false)
 * @event {Function} 							change 					选中值发生变化时触发
 * @example <xt-radio></xt-radio>
 */
export default {
	name: 'xt-radio',
	mixins: [props],
	data() {
		return {
			children: []
		};
	},
	watch: {
		// #ifdef VUE3
		modelValue: {
			handler(newVal, oldVal) {
				this.children.forEach((item) => {
					if (item.value != newVal) {
						item.checked = false;
					}
					if (item.value === newVal) {
						item.checked = true;
					}
				});
			}
		},
		// #endif
		value: {
			handler(newVal, oldVal) {
				this.children.forEach((item) => {
					if (item.value != newVal) {
						item.checked = false;
					}
					if (item.value === newVal) {
						item.checked = true;
					}
				});
			}
		}
	},
	methods: {
		updateValue(e) {
			// #ifdef VUE2
			this.$emit('input', e);
			// #endif
			// #ifdef VUE3
			this.$emit('update:modelValue', e);
			// #endif
			this.$emit('change', e);
			this.children.forEach((item) => {
				if (item.value != e) {
					item.checked = false;
				}
				if (item.value === e) {
					item.checked = true;
				}
			});
		},
		array(value) {
			if (typeof Array.isArray === 'function') {
				return Array.isArray(value);
			}
			return Object.prototype.toString.call(value) === '[object Array]';
		}
	},
	created() {
		this.children = [];
	},
	mounted() {}
};
</script>
<style scoped>
@import './style.css';
</style>